echarts显示全国地图（附带全国地图json数据） |
您所在的位置：网站首页 › 中国地图 各省市及简称 › echarts显示全国地图（附带全国地图json数据） |
echarts显示全国地图（附带全国地图json数据）
|
文章目录
前言一、效果展示二、实现步骤1.安装echarts2.在main.js中全局注册echarts3.导入地图json数据4.创建cityExport.js文件4.创建地图
前言
实现echarts全国地图展示，可点击进入省份，可根据经纬度坐标进行位置标记 一、效果展示全国地图 https://download.csdn.net/download/weixin_44088179/88251920?spm=1001.2014.3001.5501 下载后放入自己项目中（我放在static目录中），这里是全国及各个省份的所有json数据集合，如还需市、区级还需自行下载，地址如下： http://datav.aliyun.com/portal/school/atlas/area_selector 可下载全国所有地区的json数据（全国、省、市、区） 4.创建cityExport.js文件创建cityExport.js文件，汇总所有地图json (引入路径记得修改) let cityList = [ { name: '北京市', code: 110000, data: require('../../../static/json/beijing.json'), }, { name: '天津市', code: 120000, data: require('../../../static/json/tianjin.json'), }, { name: '河北省', code: 130000, data: require('../../../static/json/hebei.json'), }, { name: '山西省', code: 140000, data: require('../../../static/json/shanxi.json'), }, { name: '内蒙古自治区', code: 150000, data: require('../../../static/json/neimenggu.json'), }, { name: '辽宁省', code: 210000, data: require('../../../static/json/liaoning.json'), }, { name: '吉林省', code: 220000, data: require('../../../static/json/jilin.json'), }, { name: '黑龙江省', code: 230000, data: require('../../../static/json/heilongjiang.json'), }, { name: '上海市', code: 310000, data: require('../../../static/json/shanghai.json'), }, { name: '江苏省', code: 320000, data: require('../../../static/json/jiangsu.json'), }, { name: '浙江省', code: 330000, data: require('../../../static/json/zhejiang.json'), }, { name: '安徽省', code: 340000, data: require('../../../static/json/anhui.json'), }, { name: '福建省', code: 350000, data: require('../../../static/json/fujian.json'), }, { name: '江西省', code: 360000, data: require('../../../static/json/jiangxi.json'), }, { name: '山东省', code: 370000, data: require('../../../static/json/shandong.json'), }, { name: '河南省', code: 410000, data: require('../../../static/json/henan.json'), }, { name: '湖北省', code: 420000, data: require('../../../static/json/hubei.json'), }, { name: '湖南省', code: 430000, data: require('../../../static/json/hunan.json'), }, { name: '广东省', code: 440000, data: require('../../../static/json/guangdong.json'), }, { name: '广西壮族自治区', code: 450000, data: require('../../../static/json/guangxi.json'), }, { name: '海南省', code: 460000, data: require('../../../static/json/hainan.json'), }, { name: '重庆市', code: 500000, data: require('../../../static/json/chongqing.json'), }, { name: '四川省', code: 510000, data: require('../../../static/json/sichuan.json'), }, { name: '贵州省', code: 520000, data: require('../../../static/json/guizhou.json'), }, { name: '云南省', code: 530000, data: require('../../../static/json/yunnan.json'), }, { name: '西藏自治区', code: 540000, data: require('../../../static/json/xizhang.json'), }, { name: '陕西省', code: 610000, data: require('../../../static/json/shangxi.json'), }, { name: '甘肃省', code: 620000, data: require('../../../static/json/gansu.json'), }, { name: '青海省', code: 630000, data: require('../../../static/json/qinghai.json'), }, { name: '宁夏回族自治区', code: 640000, data: require('../../../static/json/ningxia.json'), }, { name: '新疆维吾尔自治区', code: 650000, data: require('../../../static/json/xinjiang.json'), }, { name: '香港特别行政区', code: 810000, data: require('../../../static/json/xianggang.json'), }, { name: '澳门特别行政区', code: 820000, data: require('../../../static/json/aomen.json'), }, { name: '台湾省', code: 710000, data: require('../../../static/json/taiwan.json'), }, ]; let china = require('../../../static/json/china.json') export default { cityList: cityList, china: china }; 4.创建地图代码如下（示例）： import cityExport from './cityExport.js'; import * as echarts from 'echarts'; export default { data() { return { isreturn: false, // 是否显示返回全国地图按钮 mapChart: null, //地图对象 mapOption: null,//地图属性 dataList: [ //地图标记经纬度坐标和code码,可只要经纬度 { name: "西藏", value: [91.23, 29.5, 2333] }, { name: "黑龙江", value: [128.03, 47.01, 1007] }, ], } }, mounted() { this.getMap() }, methods: { getMap() { //地图 if (!this.mapChart) { this.mapChart = this.$echarts.init(document.getElementById('map')); } this.mapOption = { // 背景颜色 backgroundColor: "#00264e", // 提示浮窗样式 tooltip: { show: true, trigger: "item", alwaysShowContent: false, backgroundColor: "#0C121C", borderColor: "rgba(0, 0, 0, 0.16);", hideDelay: 100, triggerOn: "mousemove", enterable: true, textStyle: { color: "#DADADA", fontSize: "12", width: 20, height: 30, overflow: "break", }, showDelay: 100 }, map: 'china', roam: true,//是否启缩放和平移 scaleLimit: { min: 1, max: 5 }, label: { normal: { show: true, fontSize: '10', color: '#fff' } }, // 地图配置 geo: { map: "china", label: { // 通常状态下的样式 normal: { show: true, textStyle: { color: "#eee", }, }, // 鼠标放上去的样式 emphasis: { textStyle: { color: "#eee", }, }, }, // 地图区域的样式设置 itemStyle: { normal: { borderColor: "#ccc", borderWidth: 1, areaColor: { type: "radial", x: 0.5, y: 0.5, r: 0.8, colorStops: [ { offset: 0, color: "rgba(147, 235, 248, 0)", // 0% 处的颜色 }, { offset: 1, color: "rgba(147, 235, 248, .2)", // 100% 处的颜色 }, ], globalCoord: false, // 缺省为 false }, shadowColor: "#457b9d", shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10, }, // 鼠标放上去高亮的样式 emphasis: { areaColor: "#389BB7", borderWidth: 0, }, }, }, series: [ { name: '站点信息', coordinateSystem: 'geo', type: 'scatter', geoIndex: 0, itemStyle: { normal: { color: '#c23531' }, emphasis: { borderColor: '#fff', borderWidth: 1, opacity: 0.5 } }, symbolSize: 12, data: this.dataList } ], }; // 地图注册，第一个参数的名字必须和option.geo.map一致 this.$echarts.registerMap('china', cityExport.china); this.mapChart.setOption(this.mapOption); //地图点位点击事件 this.mapChart.on('click', params => { // 获取点击的省份名称 let provinceName = params.name // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示 this.dataList.map(item => { if (item.name == provinceName) { this.mapOption.series[0].data = [item]; } }) // 进入省级地图 cityExport.cityList.map(value => { if (value.name.indexOf(provinceName) !== -1) { this.mapChart.clear(); this.mapOption.geo.map = 'Pmap'; this.$echarts.registerMap('Pmap', value.data) this.mapChart.setOption(this.mapOption); this.isreturn = true; } }); }) }, rebackMap() { //返回全国地图 this.mapChart.clear(); this.mapOption.series[0].data = this.dataList //重新标记 this.mapOption.geo.map = 'china'; this.$echarts.registerMap('china', cityExport.china); this.mapChart.setOption(this.mapOption); this.isreturn = false; } } } |
省级地图（西藏） 
【本文地址】
今日新闻 |
推荐新闻 |